<template>
  <q-page class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        文本
        <span class="text-subtitle1">本页展示文本相关样式</span>
      </div>
    </div>
    <div class="q-pa-md shadow-3">
      <div v-for="textStyle in textStyles" :class="{row:true, 'items-center':true, 'q-py-xs':true, 'simple-border-bottom':textStyle.separator }"
        :key="textStyle.textStyle">
        <div class="col-2 text-right q-pr-md">
          <q-badge :color="textStyle.emphasis===true?'primay':'grey-4'" :text-color="textStyle.emphasis===true?'white':'black'"
            :label="textStyle.textStyle" />
        </div>
        <div :class="'col-10 '+ textStyle.textStyle">{{textStyle.textDisplay}}</div>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'TextDemo'
}
</script>

<script lang="ts" setup>
const textStyles = [
  {
    textStyle: 'text-h1',
    textDisplay: '这个很少用'
  },
  {
    textStyle: 'text-h2',
    textDisplay: '这个也很少用'
  },
  {
    textStyle: 'text-h3',
    textDisplay: '这个还是很少用'
  },
  {
    textStyle: 'text-h4',
    textDisplay: '这个还是还是很少用'
  },
  {
    textStyle: 'text-h5',
    textDisplay: '这个通常用来作为页面标题',
    emphasis: true
  },
  {
    textStyle: 'text-h6',
    textDisplay: '这个通常用来作为正文中的标题',
    emphasis: true,
    separator: true
  },
  {
    textStyle: 'text-subtitle1',
    textDisplay: '这个通常作为页面标题的副标题',
    emphasis: true
  },
  {
    textStyle: 'text-subtitle2',
    textDisplay: '这个通常作为正文中的标题的副标题',
    emphasis: true,
    separator: true
  },
  {
    textStyle: 'text-body1',
    textDisplay: '正文内容1，貌似不怎么需要'
  },
  {
    textStyle: 'text-body2',
    textDisplay: '正文内容2，貌似也不怎么需要',
    separator: true
  },
  {
    textStyle: 'text-caption',
    textDisplay: '字幕，或用于一些图片的小注释'
  },
  {
    textStyle: 'text-overline',
    textDisplay: '用于页眉页脚的文本',
    separator: true
  },
  {
    textStyle: 'text-weight-thin',
    textDisplay: '非常细的文本'
  },
  {
    textStyle: 'text-weight-light',
    textDisplay: '比较细的文本'
  },
  {
    textStyle: 'text-weight-regular',
    textDisplay: '标准粗细的文本'
  },
  {
    textStyle: 'text-weight-medium',
    textDisplay: '中等粗的文本'
  },
  {
    textStyle: 'text-weight-bold',
    textDisplay: '比较粗的文本'
  },
  {
    textStyle: 'text-weight-bolder',
    textDisplay: '非常粗的文本',
    separator: true
  },
  {
    textStyle: 'text-right',
    textDisplay: '文本靠右',
    emphasis: true
  },
  {
    textStyle: 'text-left',
    textDisplay: '文本靠左',
    emphasis: true
  },
  {
    textStyle: 'text-center',
    textDisplay: '文本居中',
    emphasis: true
  },
  {
    textStyle: 'text-justify',
    textDisplay: '文本自适应'
  },
  {
    textStyle: 'text-bold',
    textDisplay: '文本加粗',
    emphasis: true
  },
  {
    textStyle: 'text-italic',
    textDisplay: '文本变斜体'
  },
  {
    textStyle: 'text-no-wrap',
    textDisplay: '文本不折行',
    emphasis: true
  },
  {
    textStyle: 'text-strike',
    textDisplay: '文本加删除线'
  },
  {
    textStyle: 'text-uppercase',
    textDisplay: '文本全部大写: I am Chinese.'
  },
  {
    textStyle: 'text-lowercase',
    textDisplay: '文本全部小写：I am Chinese.'
  },
  {
    textStyle: 'text-capitalize',
    textDisplay: '单词首字母大写：I am Chinese.'
  }
]
</script>

<style scoped>

</style>
